<script setup>
import { ref, reactive } from "vue";

import { ElMessage } from "element-plus";

// import util from '@/utils/util';
import config from "@/utils/config.js";

// 参数接收
// const props = defineProps({
// 	info: {
// 		type: Object,
// 		default: () => {
// 			return {};
// 		},
// 	},
// })

// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
const modelValue = defineModel();
const token = localStorage.getItem("token");

// 上传失败
function handleError(e) {
  console.log("handleError", e);
}

// 文件类型限制JPG/JPEG/PNG
const fileType = reactive(["png", "jpg", "jpeg"]);
// 准备上传
function beforeUpload(file) {
  // 校检文件类型
  const fileName = file.name.split(".");
  const fileExt = fileName[fileName.length - 1];
  const isTypeOk = fileType.indexOf(fileExt) >= 0;
  if (!isTypeOk) {
    ElMessage.error(`文件格式不正确, 请上传${fileType.join("/")}格式文件!`);
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error("上传附件大小不能超过 10MB!");
  }

  return isLt10M;
}

// 上传成功
function handleSuccess(response, file, fileList) {
  // console.log('success response', response);
  // console.log('success file', file);

  file = {
    url: response.fileName,
  };
  // console.log('success fileList', fileList);
}

// 当超出限制时，执行的钩子函数
function handleExceed() {
  ElMessage.warning("超出可上传限制");
}

// 预览
const dialogVisible = ref(false);
const dialogImageUrl = ref("");
// 预览
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file.url || "";
  dialogVisible.value = true;
}

// 回调
const emit = defineEmits(["change"]);
</script>

<template>
  <el-upload
    list-type="picture-card"
    :limit="1"
    v-model:file-list="modelValue"
    :action="`${config.host}/common/upload`"
    :headers="{
      Authorization: `Bearer ${token}`,
    }"
    :before-upload="beforeUpload"
    :on-error="handleError"
    :on-success="handleSuccess"
    :auto-upload="true"
    :on-preview="handlePictureCardPreview"
    :on-exceed="handleExceed"
    style="width: 100%"
  >
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
  </el-dialog>
</template>

<style lang="scss" scoped></style>
